<template>
  <el-card style="width: 100%;" class="Comment">
    <template #header>
      <div class="header">
        <span>订单管理</span>
        <div class="left"><el-input @keyup.enter="searchOrder" v-model="searchData" placeholder="搜索">
      <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
    </el-input>
    </div>
      </div>
    </template>
    <el-table 
    :data="commentsList" 
    stripe
    style="width: 100%"
    v-loading.fullscreen.lock="loadingfalg"
    @row-click ="clickRow"
    >
    <el-table-column type="index" width="50" />
    <el-table-column
    label="订单编号" align="center"  width="130"
    >
      <template #default="scope">
        <text><span style="color: rgb(37, 157, 255);">{{ scope.row.serial }}</span></text>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="user_name" label="用户名" min-width="120"  />
    <el-table-column align="center" prop="matron_name" label="月嫂" />
    <el-table-column align="center" prop="start_date"  min-width="110" label="开始日期" />
    <el-table-column align="center" prop="end_date" min-width="110" label="结束时间"/>
    <el-table-column
    label="服务时长" align="center"  min-width="120"
    >
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content: center;">
          <el-icon color="rgb(37, 157, 255)"><timer  /></el-icon>
          <span style="margin-left: 10px">{{ computDay(scope.row.start_date,scope.row.end_date) }}天</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
    label="价格" align="center"  min-width="120"
    >
      <template #default="scope">
        <text>￥<span style="color: red;">{{ scope.row.price }}</span></text>
      </template>
    </el-table-column>
    <el-table-column
    label="是否付款"  min-width="100"
    >
      <template #default="scope">
        <el-button v-if="scope.row.is_pay" size="small"   type="primary">已付款</el-button>
        <el-button v-else  size="small"  type="danger">未付款</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="是否服务" min-width="100"
    >
      <template #default="scope">
        <el-button v-if="scope.row.is_sever" size="small"   type="primary">已服务</el-button>
        <el-button v-else  size="small"  type="warning">未服务</el-button>
      </template>
    </el-table-column>
    <el-table-column
    label="是否评论" min-width="100"
    >
      <template #default="scope">
        <el-button v-if="scope.row.is_comment" size="small"   type="primary">已评论</el-button>
        <el-button v-else  size="small"  type="warning">未评论</el-button>
      </template>
    </el-table-column>

  </el-table>
  <div class="pagination"> <el-pagination 
    background layout="prev, pager, next"
    v-model:current-page="page_data.page_num"
    v-model:page-size="page_data.page_size"
     :total="page_data.page_count*page_data.page_size"
     @current-change="currentChange"
     /></div>
  </el-card>
  <el-dialog
    v-model="alterdailog"
    title="订单详情"
    width="525"
    align-center
  >
    <div class="dailog-box">
      <div class="order-box">
        <div class="order-user"><span>用户：</span>{{ detailData.user_name }}</div>
        <div class="order-info">
          <img src="@/assets/show.png" alt="" style="position: absolute;">
          <img :src="detailData.default_img" alt="">
        <div class="order-text">
          <div class="matron-name">{{ detailData.matron_name }}</div>
          <div class="date-start"><span>开始日期</span>:{{ detailData.date_start }}</div>
          <div class="date-end"><span>结束日期</span>:{{ detailData.date_end }}</div>

        </div>
        <div class="order-day">
          <div>
            <span>x</span>{{ detailData.Day }}天
          </div>
        </div>
        </div>
        <div class="price-box">
          <div class="price"> 合计:<span>￥</span><span class="price-text">{{ detailData.price }}</span></div>
        </div>
      </div>
      <div class="order-type-box">
        <div class="order-title"><text class="text">订单信息</text></div>
        <div class="info-box">
          <div class="info-row">
            <div class="right">订单编号</div>
            <div class="left">{{ detailData.serial }}</div>
          </div>
          <div class="info-row">
            <div class="right">下单时间</div>
            <div class="left">{{ detailData.create_date }}</div>
          </div>
          <div class="info-row">
            <div class="right">是否支付</div>
            <div class="left"> 
              <el-button style="margin-right: 13px;" v-if="detailData.is_pay" size="small"   type="primary">已付款</el-button>
        <el-button style="margin-right: 13px;" v-else  size="small"  type="danger">未付款</el-button>
      </div>
          </div>
          <div class="info-row">
            <div class="right">是否服务</div>
            <div class="left">
              <el-button style="margin-right: 13px;" v-if="detailData.is_sever" size="small"   type="primary">已服务</el-button>
        <el-button style="margin-right: 13px;" v-else  size="small"  type="warning">未服务</el-button>
            </div>
          </div>
          <div class="info-row">
            <div class="right">是否评论</div>
            <div class="left">
              <el-button style="margin-right: 13px;" v-if="detailData.is_comment" size="small"   type="primary">已评论</el-button>
        <el-button style="margin-right: 13px;" v-else  size="small"  type="warning">未评论</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="detailData.is_comment" class="comment-box">
        <div class="order-title"><text class="text">评论信息</text></div>
        <div class="user_info">
        <img :src="detailData.user_img" alt="">
        <div class="user_text">
          <div class="user_name">{{ detailData.user_name }}</div>
          <div class="create_time">{{ detailData.create_date }}</div>
        </div>
      </div>
  
    <div class="content-box">
      <div class="star">
      <div class="text-star">评分:</div>
      <el-rate v-model="detailData.star" size="large" class="rate" />
    </div>
    <div class="comment">
      <el-input type="textarea" 
      :autosize="{ minRows: 5 , maxRows:7}"
      v-model="detailData.comment"
      ></el-input>
    </div>
    <div class="comment-img">
      <el-upload
       
        v-model:file-list="detailData.urls_list"
        :action="host"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handsuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    </div>
    </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" v-if="detailData.is_comment">
        <el-button @click="alterdailog = false">取消</el-button>
        <el-button type="primary" @click="uploadComment">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref ,computed} from 'vue'
import { Plus ,Timer,Search} from '@element-plus/icons-vue'
import {getOrderInfo,searchOrderApi,getOrderDetailApi} from '@/api/order'
import {alterCommentapi} from '@/api/comments'
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
import { fa } from 'element-plus/es/locale'
const searchData = ref('')
const searchOrder = async ()=>{

const res = await searchOrderApi('?page_num='+page_data.value.page_num+'&page_size='+page_data.value.page_size+'&q='+searchData.value)
if(res.code == 200){
  console.log(searchData.value);
  commentsList.value = res.data.list
  page_data.value.page_count = res.count
}
}
const clickRow= async (row,column,event) =>{
  alterdailog.value = true
  loadingfalg.value = true
const res =await getOrderDetailApi({serial:row.serial})
if(res.code == 200){
detailData.value = res.data
detailData.value.Day = computDay(detailData.value.date_start,detailData.value.date_end)
loadingfalg.value = false
}
}
const currentChange = async (num)=>{
  page_data.value.page_num = num
  loadingfalg.value  = true
  const res = await getOrderInfo(page_data.value)
  commentsList.value = res.data.list
  page_data.value.page_count = res.data.count
  loadingfalg.value = false
  console.log('comment',res.data.list,page_data.value)
}
const computDay = (start,end) =>{
  const startDay = new Date(start)
  const endDay = new Date(end)
  return  (endDay.valueOf() - startDay.valueOf())/(24*60*60*1000)
}

const loadingfalg = ref(false)
//预览图列表计算
const previewList=computed(()=>(arr)=>{
  const res_arr=[]
for(let i=0;i<arr.length;i++){
res_arr.push(arr[i].url)
}
return res_arr
})
const host = ref('https://www.damer.asia/api/admin/image/')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove= (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailData.value.url_list)
}
const handsuccess=(response,uploadFile,uploadFiles)=>{
console.log('ok',response,uploadFile,uploadFiles)
detailData.value.url_list.pop()
detailData.value.url_list.push({id:response.id,url:'https://www.damer.asia/'+response.url})
console.log(detailData.value.url_list)
}
const handlePictureCardPreview = ()=>{
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
//修改评论窗口
const alterdailog = ref(false)
//评论详情数据
const detailData = ref({
id:1,
url_list:[
  {
    id:1,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
  {
    id:2,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
  {
    id:4,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
],
Day:3,
user_img:'',
user_name:'',
comment:'',
create_date:'',
is_img:true,
matron_name:'',
default_img:'',
price:20000,
date_start:'',
date_end:'',
serial:'',
star:3,
is_pay:true,
is_comment:true,
is_serve:true,
})
const deleteComment = (index) => {
console.log('delete',index)
console.log(commentsList.value[index].comment_id)
}
const alterComment = (index) =>{
  console.log('commentid',index)
loadingfalg.value = true
  detailData.value.Day = computDay(detailData.value.date_start,detailData.value.date_end)
alterdailog.value = true
loadingfalg.value = false

}
const uploadComment =async () =>{

  // console.log(detailData.value)
  const res = await alterCommentapi({comment_id:detailData.value.id,content:detailData.value.comment,is_img:detailData.value.is_img,star:detailData.value.star,urls:detailData.value.urls_list})
  if(res.code == 200){
    ElMessage.success('修改成功')
    alterdailog.value = false
  }
  else{
    ElMessage.error('修改失败')
  }
}
const commentsList = ref([
  {
user_name:'damer',
comment_id:1,
user_id:2,
matron_id:3,
star:4,
matron_name:'张三',
create_date:'2020-09-10',
serial:'21402903201',
content:'阿姨真的而非法艰苦拉萨积分卡啦JFK老大家房客了俺看了大家发奥克兰就疯狂垃圾疯狂垃圾弗克拉家房客了的阿克洛夫尔喀里就',
is_img:false,
urls:[
  {
    id:1,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
  {
    id:2,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  }
],
start_date:'2020-02-02',
end_date:'2021-02-02',
is_pay:true,
is_serve:true,
is_comment:true,
price:20000,
  },
 
])
const page_data = ref({
  page_num:1,
  page_size:15,
  page_count:1
})
const getOrderData = async () => {
  loadingfalg.value  = true
  const res = await getOrderInfo(page_data.value)
  commentsList.value = res.data.list
  page_data.value.page_count = res.data.count
  loadingfalg.value = false
  console.log('comment',res.data.list,page_data.value)

}
getOrderData()
</script>
<style lang="scss" scoped>
*{
  user-select: none;
}
.Comment {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pagination{
    display: flex;
    justify-content: center;
    padding: 40px 0px;
  }
}
.dailog-box{
  .order-title{
      color: black;
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 5px ;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      .text{
    padding: 5px 8px 8px 8px;

      }
    }
  .order-box{
    padding: 2px 0px 0px 0px;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
    border-radius: 1%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    .order-user{
      padding: 0px 0px 4px 8px;
      border-bottom: 1px solid rgba(0,0,0,.2);
      span{
        color: rgba(0,0,0,0.8);
      }
    }
    .order-info{
      position: relative;
      display: flex;
    align-items:stretch;
    padding: 8px;
    .order-day{
      display: flex;
      justify-content: flex-end;
      align-items: end;
      flex-grow: 1;
      padding: 2px;
      letter-spacing: 0.05em;
      font-size: 18px;
        color: rgb(0, 0, 0);
      span{
        
        color: rgba(0,0,0,0.4);
      }
    }
    }
    .price-box{
      width: 100%;
      border-top: .5px solid rgba(0,0,0,0.2);
      .price{
        padding: 8px 10px;
        color: rgba(0, 0, 0,.8);
        text-align: right;
        font-size: 15px;
        span{
          color: rgba(233, 18, 18, 1);
        }
        .price-text{
          font-size: 21px;
        }
      }
    }
    img{
      border-radius: 5px;
      width: 80px;
      height: 80px;
    
    }
    .order-text{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 5px;
      color: rgba(0,0,0,0.5);
      span{
        color: rgba(0,0,0,0.8);
      }
 
     .matron-name{
      color: black;
      font-size: 18px;
      letter-spacing: 0.05em;
      margin: 2px 0px;
     }
     .date-start{
      margin: 1px 0px;
     }

    }
  }
  .order-type-box{
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    border-radius: 1%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
   
    .info-box{
      font-size: 16px;
      letter-spacing: 0.02em;
      padding:0px 8px 8px 8px;
      margin: 3px 0px;
      .info-row{
        display: flex;
        height: 25px;
        margin: 3px 0px;
        .right{
          color: rgba(0, 0, 0,.8);
          font-weight: 500;
        }
        .left{
          flex-grow: 1;
          text-align: right;
        }
      }
    }
  }
  .comment-box{
    border-radius: 1%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    padding: 3px 0px 8px 0px;
    .user_info{
    display: flex;
    align-items: center;
    padding: 7px 5px;
    border-bottom: 0.5px solid rgba(0,0,0,0.2);
    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 0px 5px ;
    }
    .user_text{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      .user_name{
        color: black;
        font-size: 16px;
        margin: 3px 0px;
      }
      .create_time{
        color: rgba(0,0,0,0.5);
      }
    }
  }
  .content-box{
    margin: 10px 8px;
    .comment{

    margin: 10px 10px 10px 0px;
  }
  .star{
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 0px 1px;
  }

  }
 

  }
}
</style>
